import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import postcssImport from 'postcss-pxtorem'
import { createHtmlPlugin } from 'vite-plugin-html'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

const getViteEnv = (mode: string, target: string) => {
  return loadEnv(mode, process.cwd())[target]
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const isBuild = command === 'build'
  const root = process.cwd()
  const env = loadEnv(mode, root)
  return {
    base: env.VITE_BASR_URL,
    resolve: {
      alias: {
        // 配置src目录
        '@': path.resolve(__dirname, 'src'),
        '#': path.resolve(__dirname, 'typeings')
      }
    },
    plugins: [
      vue(),
      createHtmlPlugin({
        inject: {
          data: {
            VITE_APP_TITLE: getViteEnv(mode, 'VITE_APP_TITLE')
          }
        }
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹 --- 指定 存储 svg 的地址路径
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        svgoOptions: isBuild,
        customDomId: '__svg__icons__dom__inject'
        // // 指定symbolId格式
        // symbolId: 'icon-[dir]-[name]' //名称格式为‘icon-name’格式
      })
    ],
    // 跨域代理
    server: {
      port: Number(env.VITE_BROWSER_PORT) || 5173,
      // env.VITE_OPEN_BROWSER ? true : false 加三目运算符 防止 路由出现 http://localhost:3001/true/#/home 自己添加 true 或 别的路由模式报错问题
      // 只识别字符串
      open: env.VITE_OPEN_BROWSER ? true : false
      // 配置代理
      // proxy: viteEnv.VITE_BASE_URL_API
      //   ? {
      //       '^/api/.*': {
      //         target: viteEnv.VITE_BASE_URL_API,
      //         changeOrigin: true,
      //         rewrite: (path) => path.replace(/^\/api/, '')
      //       }
      //     }
      //   : {}
    },
    // 适配
    css: {
      postcss: {
        plugins: [
          postcssImport({
            // 这里的rootValue就是你的设计稿大小 ，默认 以 iPhone6/7/8为基础 375 × 667
            // 要在 setting 配置   // vscode标准字体大小像素
            // "cssrem.rootFontSize": 37.5,
            rootValue: 37.5,
            propList: ['*']
          }) as any
        ]
      },
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          // 表示 使用该文件下面的变量未全局变量
          additionalData: `@use "@/assets/scss/variables.scss" as *;`
        }
      }
    },
    build: {
      chunkSizeWarningLimit: 5 * 1024,
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: (assetInfo: any) => {
            if (
              assetInfo.type === 'assets' &&
              /\.(jpe?g|png|gif|svg|json)$/i.test(assetInfo.name)
            ) {
              return 'assets/img/[name].[hash][ext]'
            }
            if (
              assetInfo.type === 'assets' &&
              /\.(ttf|woff|woff2|eot)$/i.test(assetInfo.name)
            ) {
              return 'assets/fonts/[name].[hash][ext]'
            }
            return 'assets/[ext]/name-[hash].[ext]'
          }
        }
      },
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console / debugger
          drop_console: true,
          drop_debugger: true
        }
      }
    }
  }
})
